<template>
	<view>
		<page-head headTitle="编辑资料" :returnButton="true" @clickLeftReturn="clickLeftReturn"></page-head>
		<picture-upload class="m-t9" :image="image" @changeImg="changeImg"></picture-upload>
		<view class="flex p-l-r3 p-t-b4 bg-white align-center justify-between border-botton" style="padding-right: 0 !important;">
			<text class="fs-3 width-1">门店地址</text>
			<view class="flex align-center justify-end" style="width: 100%;">
				<view class="flex address">
				    <text class="iconfont icon-dingwei store-icon m-r" style="font-size: 44rpx;"></text> 
					<text class="flex align-center fs-3 info white-space justify-end">
						{{merchant_city}}{{district}}
					</text>
				</view>
				<image class="arrow m-r1" src="/static/images/icon_right_arrow.png"></image>
			</view>
		</view>
		<view class="flex p-l-r3 p-t-b4 bg-white align-center justify-between border-botton">
			<text class="fs-3 width-1">营业时间</text>
			<view class="flex align-center">
				<view class="flex address">
					<text class="flex fs-3 m-r1 info white-space input-goods">
						<picker mode="time" :value="endTime" start="09:01" end="21:01" @change="endTimeChange">
						    <view class="input-goods">{{endTime}}</view>
						</picker>
					</text>
					<text class="flex fs-3 m-r1 info white-space ">
						<picker mode="time" :value="startTime" start="09:01" end="21:01" @change="starTimeChange">
						    <view class="input-goods">-&ensp;{{startTime}}</view>
						</picker>
					</text>	
				</view>
				<image class="arrow" src="/static/images/icon_right_arrow.png"></image>
			</view>
		</view>
		<view class="flex p-l-r3 p-t-b4 bg-white align-center justify-between border-botton">
			<text class="fs-3 width-1">联系电话</text>
			<view class="flex align-center">
				<view class="flex address">
					<text class="flex align-center fs-3 m-r1 info white-space input-goods">
						<input v-model="phone" type="number" placeholder-class="fs-3 input-goods align-center" class="text-align fs-3 input-goods" placeholder="请输入电话号码" />
					</text>
				</view>
				<image class="arrow" src="/static/images/icon_right_arrow.png"></image>
			</view>
		</view>
		<bright-button title="提交" class="m-t-b" @licekSubmit="licekSubmit"></bright-button>
	</view>
</template>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
import pageHead from '@/components/common/page-head.vue'
import brightButton from '@/components/common/bright-button.vue'
import pictureUpload from '@/components/common/picture-upload.vue'

	export default {
		components:{
			pageHead,
			brightButton,
			pictureUpload
		},
		data() {
			return {
				image:'/static/images/picture.png',
				address:'',
				startTime:'开始时间',
				endTime:'结束时间',
				phone:0,
				lng:'',
				lat:'',
				merchant_city:'',
				district:''
			}
		},
		onLoad(){
			this.getStoreInfo();
			this.getMyLocation();
		},
		methods: {
			//头像上传
			changeImg(){
				var Token = uni.getStorageSync('token');
				//console.log(Token);
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    success:(res)=> {
						//获取图片路径
						//this.image = res.tempFilePaths[0];
						//console.log(res.tempFilePaths[0]);	
						uni.uploadFile({
							url:'http://175.24.68.5:9999/api/file/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								'type': 'avatar'	
							},
							header: {
								'XX-Device-Type':'wxapp',
								'XX-Token': Token
							},
						    success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data);
								if(data.code == 1){
									this.image = data.data.url;
								}
								//console.log(data);
							}
						});	
				    }
				});
			},
			clickLeftReturn(){
				const pages = getCurrentPages() ;
				if(pages.length >1) {
					uni.navigateBack({
						delta: 1
					});
				}else{
					//返回上一页失败后强制回到首页
					uni.redirectTo({
						url: '../index/index'
					})
				}
			},
			getStoreInfo(){
				this.$myRequest({
					method:'POST',
					url:'/api/merchant/info'
				}).then(res=>{
					console.log(res);
					if(res.data.code == 1){
						let data = res.data.data;
						this.image = data.avatar;
						this.address = data.address;
						this.startTime = data.business_start_time;
						this.endTime = data.business_end_time;
						this.phone = data.phone;
					}
					
				})
			},
			//时间选择
			starTimeChange: function(e) {
			    this.startTime = e.target.value
			},
			//时间选择
			endTimeChange: function(e) {
			    this.endTime = e.target.value
			},
			//获取当前位置
			getMyLocation() {
				let _this = this;
			    const KEY ='ZMNBZ-K3H3D-V4W4I-PVLQV-JO7PJ-CJFRD'; //key 必填
			    let url = 'https://apis.map.qq.com/ws/location/v1/ip';
			    _this.$jsonp(url,{
			      key:KEY,
			      callbackName: 'QQmap',
			      output:'jsonp',
			    }).then(json => {
			    	var result = json.result;
			    	console.log(result);
			    	this.merchant_city = result.ad_info.city;
					this.district = result.ad_info.district;
					this.lat = result.location.lat;
					this.lng = result.location.lng;
			    })
			},
			licekSubmit(){
				this.$myRequest({
					method:'POST',
					url:'/api/merchant/editinfo',
					data:{
						avatar:this.image,
						address:this.address,
						business_start_time:this.startTime,
						business_end_time:this.endTime,
						phone:this.phone,
						lng:this.lng,
						lat:this.lat,
						merchant_city:this.merchant_city
					}
				}).then(res=>{
					//console.log(res);
					uni.showToast({
					    title: '修改成功',
					    duration: 2000
					});
				})	
			}
		}
		
	}
	
</script>

<style scoped>
view{line-height: 1;}
.m-t-b{margin-top: 240rpx;margin-bottom: 60rpx;}
.address{width: 500rpx;justify-content:flex-end;}
.info{max-width: 400rpx;}
.store-icon{font-size: 48rpx;color: #AAAAAA;}
</style>
